<template>
  <avue-crud
    ref="crud"
    v-model:page="page"
    :table-loading="loading"
    :option="{
      ...tableOption,
      border: tableList.length > 0,
      showHeader: tableList.length > 0
    }"
    :data="tableList"
    class="log-crud"
  >
  </avue-crud>
</template>

<script setup>
import { listOperatelog } from '@/api/operatelog'
const props = defineProps({
  refId: {
    type: String,
    default: ''
  }
})
const page = ref({
  currentPage: 1,
  pageSize: 5,
  layout: "total, prev, pager, next",
  total: 0
})
const loading = ref(false)
const tableList = ref([])
const tableOption = ref(null)
tableOption.value = {
  size: "small",
  maxHeight: 500,
  header: false,
  menu: false,
  emptyText: "暂无操作记录",
  column: [
    {
      label: "操作描述",
      prop: "description"
    },
    {
      label: "操作时间",
      prop: "createTime",
      type: "datetime",
      format: "YYYY-MM-DD HH:mm:ss"
    },
    {
      label: "操作人",
      prop: "operatorName"
    }
  ]
}

const getOperateLogs = () => {
  loading.value = true
  listOperatelog({
    refId: props.refId
  })
    .then(res => {
      tableList.value = res.data || []
    })
    .finally(() => {
      loading.value = false
    })
}

watch(
  () => props.refId,
  (val) => {
    if (val) {
      getOperateLogs()
    }
  },
  {
    immediate: true
  }
)

</script>

<style scoped lang="scss">
.log-crud {
  :deep(.avue-crud__empty) {
    padding: 0;
    .el-empty {
      --el-empty-padding: 10px 0;
      --el-empty-image-width: 60px;
      --el-empty-description-margin-top: 0;
    }
  }
}
</style>
